<template>
    <div>
        <div class="top-shops-info">
            <div class="search-info">
                <form @submit.prevent="Seach_btn">
                    <input type="search" placeholder="搜索商品" v-model="goodsName">
                </form>
                <i class="icon" @click="Seach_btn"></i>
                <i class="e-code" v-show="false"></i>
                <img src="../../assets/vertical.png" alt="" style="width:25px; height:25px; margin-top:0.25rem;" @click="entrance()">
            </div>
            <div class="shop-info">
                <img :src="headimgurl" alt="" class="shop-img">
                <div class="infos">
                    <p class="text1" style="text-align: left">{{Store.companyName}}</p>
                    <p class="text2"> 关注量：{{guanzhuint}}</p>
                </div>
                <div class="follow" @click="guanzhu_1" v-if="guanzhu2.length<=0">
                    <i class="icon"></i>
                    <span>关注</span>
                </div>
                <div class="follow" v-else>
                    <i class="icon" style="margin-left:-5px"></i>
                    <span style="font-size:14px; " @click="guanzhuquxiao">已关注</span>
                </div>
            </div>
        </div>
        <div class="shop-content-in">
            <div class="nav-bar">
                <ul class="list-ul">
                    <li class="list-li" v-if="newdent==0">
                         <!-- <li class="list-li"> -->
                        <router-link :to="{name:'Shops',query:{id:shopsID}}" @click.native="fons(1)">
                            <span class="top-icon" :class="{active:'Shops'==tabstr}"></span>
                            <p class="text " :class="{active:'Shops'==tabstr}" style="text-align:center;">主页</p>
                            <i class="bt-icon" :class="{active:'Shops'==tabstr}"></i>
                        </router-link>
                    </li>
                     <li class="list-li" v-else>
                        <a @click="service()">
                            <span class="top-icon" :class="{active:'index'==tabstr}"></span>
                            <p class="text " :class="{active:'index'==tabstr}" style="text-align:center;">客服</p>
                            <i class="bt-icon" :class="{active:'index'==tabstr}"></i>
                        </a>
                    </li>
                    <li class="list-li">
                        <router-link :to="{name:'Commodity',query:{id:shopsID}}" @click.native="fons(2)">
                            <span class="top-icon" :class="{active:'Commodity'==tabstr}">{{records}}</span>
                            <p class="text" :class="{active:'Commodity'==tabstr}" style="text-align:center;">商品</p>
                            <i class="bt-icon" :class="{active:'Commodity'==tabstr}"></i>
                        </router-link>
                    </li>
                    <!-- <li class="list-li">
                        <router-link :to="{path:'new_enter',query:{id:shopsID}}" @click.native="fons(2)">
                            <span class="top-icon" :class="{active:'Commodity'==tabstr}">{{records}}</span>
                            <p class="text" :class="{active:'Commodity'==tabstr}" style="text-align:center;">商家入驻</p>
                            <i class="bt-icon" :class="{active:'Commodity'==tabstr}"></i>
                        </router-link>
                    </li> -->
                    <li class="list-li">
                        <a @click="href(shopsID)">
                             <span class="top-icon" :class="{active:'index'==tabstr}">0</span><!--<i class="dian"></i> -->
                            <p class="text" :class="{active:'index'==tabstr}" style="text-align:center;">社群</p>
                            <i class="bt-icon" :class="{active:'index'==tabstr}"></i>
                        </a>
                    </li>
                    <li class="list-li">

                         <router-link :to="{name:'Commodity_comment',query:{id:shopsID,tiTle:TiTle,fenxiangUrl:fenxiangUrl}}">
                            <!--没出-->
                            <span class="top-icon" :class="{active:'index'==tabstr}">{{JOrderCount}}<!--<i class="dian"></i> --></span>
                            <p class="text" :class="{active:'index'==tabstr}"  style="text-align:center;">评论</p>
                            <i class="bt-icon" :class="{active:'index'==tabstr}"></i>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
        <div class="shops_seach"  v-show="''!=goodsName">
            <!-- v-show="shops_seach" -->
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="4" class="bottom">
            <div class="shops_seach_bg" v-if="good_list_list_show">
                <ul class="top-nav" v-show="false">
                    <li class="list-li" :class="{red_r:ordertype==1}" @click="ordertype=1">推荐</li>
                    <li class="list-li" :class="{red_r:ordertype==2}" @click="ordertype=2">销量</li>
                    <li class="list-li" :class="{red_r:ordertype==3}" @click="ordertype=3">最新</li>
                    <li class="list-li" :class="{red_r:ordertype==4}" @click="ordertype=4">距离</li>
                </ul>
                <div class="guess-content-in" >
                    <div class="same-box" v-for="item in  good_list_top" :key="item.goodsId"  @click="href_Commodity_details(item.goodsId)">
                        <div class="top-info">
                            <img :src="item.goodsThum" class="img-info" alt="">
                            <i class="icon"></i>
                            <span>5折</span>
                        </div>
                        <div class="bottom-info">
                            <h4 class="title">{{item.goodsName}}</h4>
                            <div class="price">
                                <span class="quanhou">现价 <strong>￥{{item.goodsScreenPrice | amountMin100(2)}}</strong></span>
                            </div>
                            <div class="price" v-show="false">
                                <s>原价￥196</s>
                                <span class="xiaoliang">月销 524</span>
                                <span class="quanhou">券后 <strong>￥98</strong></span>
                                <span class="card-icon">98元券</span>
                            </div>
                            <div class="shop-cart" v-show="false">
                                <span class="zxs">找相似</span>
                                <span class="in-shop"><i class="icon"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <loadingtmp :busy="busy" :datalength="good_list_top.length" :loadall="loadall"></loadingtmp>
                <div class="clerfix"></div>
            </div>
            </div>
        </div>
        <PhoneVerification ref="PhoneVerification" @getMessage="getVal"></PhoneVerification>
    </div>
</template>
<style scoped>
    @import "../../assets/business/css/shops.css";
    .shop-img{

        width: 2rem !important;
        height: 2rem !important;
        margin-left: 15px;
    }
    .bottom{
        margin-bottom: 47px;
    }
    .clerfix {
        clear: both;
    }

    .shops_seach {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 8%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        overflow: scroll;
    }

    .shops_seach_bg {
        background: white;
    }

    .red_r {
        color: red;
    }

    .top-nav li {
        padding: 20px;
        margin: 0 10px;
        float: left;
    }

    .guess-content-in {
        width: 94%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

    }

        .guess-content-in .same-box {
            width: 48.5%;
            /* border-radius:5px; */
            /* height:13rem; */
            margin-bottom: 10px;
            box-shadow: 0px 1px 6px #e5e5e5;
            position: relative;
            /* padding-bottom: 0.3rem; */
            height: 265px;
        }

            .guess-content-in .same-box .top-info {
                width: 100%;
                /* height: 3.5rem; */
                background: #f9f9f8;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                overflow: hidden;
            }

                .guess-content-in .same-box .top-info .img-info {
                    width: 90%;
                    height: 153px;
                    display: block;
                    margin: 0 auto;
                    margin-top: 1rem;
                }

                .guess-content-in .same-box .top-info .icon {
                    display: block;
                    width: 1.25rem;
                    height: 0.5rem;
                    position: absolute;
                    left: 0;
                    top: 12px;
                    font-size: 14px;
                    text-align: center;
                    display: none;
                }

                .guess-content-in .same-box .top-info span {
                    width: 1.25rem;
                    height: 0.5rem;
                    position: absolute;
                    left: 0;
                    top: 12px;
                    font-size: 14px;
                    text-align: center;
                    z-index: 99999;
                    color: #ffffff;
                    line-height: 0.5rem;
                    display: none;
                }

            .guess-content-in .same-box .bottom-info {
                position: relative;
                overflow: hidden;
            }

                .guess-content-in .same-box .bottom-info .title {
                    font-size: 14px;
                    color: #000000;
                    margin-left: 0.1rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    padding: 15px 0;
                }

                .guess-content-in .same-box .bottom-info .price {
                    margin-top: 0.1rem;
                    margin-left: -40px;
                    padding-bottom: 0.1rem;
                }

                    .guess-content-in .same-box .bottom-info .price .xiaoliang {
                        font-size: 12px;
                        color: #999999;
                        float: right;
                        margin-right: 0.5rem;
                        display: inline-block;
                        margin-top: 0.03rem;
                    }

                    .guess-content-in .same-box .bottom-info .price .quanhou {
                        color: #ff0808;
                        display: block;
                        font-size: 12px;
                        margin-top: 0.1rem;
                        width: 100%;
                        text-align: left;
                        padding-left: 49px;
                        box-sizing: border-box;
                    }

                    .guess-content-in .same-box .bottom-info .price .card-icon {
                        font-size: 12px;
                        padding: 0rem 0.1rem;
                        color: #ffffff;
                        position: absolute;
                        right: 0.1rem;
                        bottom: 0.1rem;
                    }

                    .guess-content-in .same-box .bottom-info .price strong {
                        font-size: 16px;
                    }

                    .guess-content-in .same-box .bottom-info .price s {
                        font-size: 11px;
                        color: #999999;
                    }

                .guess-content-in .same-box .bottom-info .shop-cart {
                    margin-top: 0.25rem;
                    position: relative;
                    margin-left: 10px;
                    display: none;
                }

                    .guess-content-in .same-box .bottom-info .shop-cart .zxs {
                        color: #ff0808;
                        border: 1px solid #ff0808;
                        display: inline-block;
                        padding-left: 5px;
                        padding-right: 5px;
                        border-radius: 5px;
                    }

                    .guess-content-in .same-box .bottom-info .shop-cart .in-shop {
                        width: 26px;
                        height: 26px;
                        display: block;
                        background: #ff0808;
                        border-radius: 50%;
                        position: absolute;
                        right: 8px;
                        bottom: 0px;
                    }

                        .guess-content-in .same-box .bottom-info .shop-cart .in-shop .icon {
                            background-size: 100% 100%;
                            width: 16px;
                            height: 16px;
                            display: block;
                            margin: 0 auto;
                            margin-top: 0.2rem
                        }
</style>
<script>
import loadingtmp from '@/components/load/loading'
import PhoneVerification from '@/components/PhoneVerification'
    export default {
        props: {
            tabstr: String
        },
        data() {
            return {
                shopsID: 0,
                Store: {},
                pageName: "Shops",
                guanzhu: {},
                companyId: '',
                collectionType: 2,
                uid: '',
                guanzhu2: {},
                collectionid: '',
                records: '',
                shops_seach: false,
                goodsName: '',
                ordertype: 1,
                good_list_top: [],//搜索
                good_list_list_show:false,
                page: 1,//分页
                pageSize:6,
                busy:true,
                loadall: false,
                headimgurl:'',
                JOrderCount:'',
                guanzhuint:'',
                PhoneVerificationStyle:'',//这是子组件传来的值
                TiTle:'',
                fenxiangUrl:'',
                urlid:'',
                id:1,
                newdent:''
            }
        },
        created(){
            // 第一次
        console.log('進入shops_top')
        },
        mounted() {
            // 第一次
            console.log('shops_mounted')
            this.TheStore();
            this.guanzhu_2()
            this.records_new();
            this.OrderCount();
            this.guanzhuliang();
        },
      activated() {
        this.TheStore();
        this.guanzhu_2()
        this.records_new();
        this.OrderCount();
        this.guanzhuliang();
      },
        components: {
            loadingtmp,
            PhoneVerification
		},
        methods: {
            entrance(){
             this.$router.push({ path: 'entrance',query:{id:this.shopsID}})
            },
            service(){
               window.location='/wap/service.html?companyid='+this.shopsID+'&'+'fromid='+window.localStorage.headid
            },
            fons(id){
                  console.log(id)
             this.id=id
             if(id==2){
                //  alert('测试')
                //   this.$router.push({path:'new_enter',query:{id:this.shopsID}})
             }
            },
         getwxconfig(){
          var vm= this;
          console.log(vm);
          this.$http.get(this.APIURL_PREFIX+"/api/wxs/config?url="+escape(location.href.split('#')[0])).then((response) => {
            console.log(response.data);
            var appid = 'wx488ae3f57360b7ea';
            wx.config({
              debug: false,
              appId: appid,
              timestamp: response.data.data.timestamp,
              nonceStr: response.data.data.noncestr,
              signature: response.data.data.signature,
              jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','scanQRCode']
            });
            wx.ready(function(){
              wx.onMenuShareTimeline({
                title: vm.TiTle,
                //link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+vm.urlid+"-"+vm.shopsID,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+localStorage.headid+"-"+vm.shopsID+"-"+vm.id,
                // link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-0"+"-"+vm.shopsID,
                imgUrl:vm.fenxiangUrl,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });
              wx.onMenuShareAppMessage({
                title: vm.TiTle,
                //link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+vm.urlid+"-"+vm.shopsID,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+localStorage.headid+"-"+vm.shopsID+"-"+vm.id,
                // link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-0"+"-"+vm.shopsID,
                imgUrl:vm.fenxiangUrl,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });
              wx.onMenuShareQQ({
               title: vm.TiTle,
                //link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+vm.urlid+"-"+vm.shopsID,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+localStorage.headid+"-"+vm.shopsID+"-"+vm.id,
                // link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-0"+"-"+vm.shopsID,
                imgUrl:vm.fenxiangUrl,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });
              wx.onMenuShareWeibo({
               title: vm.TiTle,
                //link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+vm.urlid+"-"+vm.shopsID,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+localStorage.headid+"-"+vm.shopsID+"-"+vm.id,
                // link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-0"+"-"+vm.shopsID,
                imgUrl:vm.fenxiangUrl,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });
              wx.onMenuShareQZone({
              title: vm.TiTle,
                //link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+vm.urlid+"-"+vm.shopsID,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-"+localStorage.headid+"-"+vm.shopsID+"-"+vm.id,
                // link: "http://"+window.location.host+"/wap/wx/login?fk=1-40-0"+"-"+vm.shopsID,
                imgUrl:vm.fenxiangUrl,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });

            });
          }).catch(function(err){
            console.log(err)
          });

        },
         guanzhuliang(){//关注量
          this.$http.get(this.APIURL_PREFIX+'/api/wap/collection/companyCount',{params:{companyId:this.shopsID,collectionType:2}}).then((response) => {
             this.guanzhuint=response.data.data
             console.log(response.data.data)
			  	}).catch(function(err){
					console.log(err)
         })
       },
        OrderCount(){//待评价个数
            // console.log(this.shopsID+"123")
            this.$http.get(this.APIURL_PREFIX+'/api/wap/comment/count',{params:{companyId:this.shopsID}}).then((response) => {
                this.JOrderCount=response.data.data
                console.log(this.JOrderCount)
            }).catch(function(err){

            })
		},
            TheStore() {
                console.log(6666)
                this.shopsID = this.$route.query.id;
                console.log('companyid'+this.shopsID)
                this.$http.get(this.APIURL_PREFIX + '/api/wap/company/SelectOnly/' + this.shopsID).then((response) => {
                    this.Store = response.data.data
                    this.uid = this.Store.userId
                    this.urlid=this.Store.userId
                    this.headimgurl=response.data.data.headimgurl
                    this.TiTle=this.Store.companyName
                    this.shuoming=this.Store.slogan
                    this.fenxiangUrl=this.headimgurl
                    if(response.data.data.iskefu==0){
                          this.newdent=0
                    }else{
                        this.newdent=1
                    }
                    // this.getwxconfig();
                }).catch(function (err) {
                    console.log(err)
                })
            },
            guanzhu_1: function () {//1是关注
                 this.$refs.PhoneVerification.childMethod();
                console.log(this.PhoneVerificationStyle+"1112222333")
                if("成功"==this.PhoneVerificationStyle){
                     this.$http.post(this.APIURL_PREFIX + '/api/wap/collection/', $.param({ companyId: this.shopsID, collectionType: this.collectionType })).then((response) => {
                        this.guanzhu_2()
                        layer.msg("关注成功")
                        this.guanzhuliang()
                     }).catch(function (err) {
                    })
                }else{

                }
            },
            guanzhu_2() {//2是获取关注没关注
                     this.$http.get(this.APIURL_PREFIX + '/api/wap/collection?companyId=' + this.shopsID + "&collectionType=2&userId=" + this.uid).then((response) => {
                        this.guanzhu2 = response.data.data;
                        console.log(this.guanzhu2)
                        this.collectionid = this.guanzhu2[0].id
                        console.log(this.collectionid)
                     }).catch(function (err) {
                  })
            },
            records_new() {
                this.$http.get(this.APIURL_PREFIX + "/api/wap/coupon/goods/custom?goodsProviderId=" + this.shopsID + "&goodsOnline=1&page=1&rows=1").then((response) => {
                    this.records = response.data.records
                }).catch(function (err) {
                    console.log(err)
                });
            },
            guanzhuquxiao() {
                this.$http.delete(this.APIURL_PREFIX + '/api/wap/collection/' + this.collectionid).then((response) => {
                    this.guanzhu_2()
                     layer.msg("取消关注成功")
                     this.guanzhuliang()
                }).catch(function (err) {
                })
            },
            href(id) {
                window.location = '/wap/hudong.html?id=' + id
            },
            Seach_btn: function () {
                this.good_list=[]
                this.page=1;

                this.loadMore()
                console.log("执行了")
                this.good_list_list_show=true
            },
            good(flag){
                this.$http.get(this.APIURL_PREFIX + "/api/wap/searchGoods", { params: { page:this.page, rows: this.pageSize, goodsProviderId: this.shopsID, goodsName: this.goodsName } }).then((response) => {
                    if (flag) {
                        this.good_list_top =this.good_list_top.concat(response.data.data);
                    } else {
                        this.good_list_top= response.data.data;
                    }
                    if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                        this.busy = true;
                        this.loadall = true;
                    }
                    else {
                        this.busy = false;
                        this.page++
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            } ,
            loadMore() {
                this.busy = true;
                console.log("+++++++++=")
                setTimeout(() => {
                    this.good(this.page > 1);
                }, 500);
             },
             href_Commodity_details:function(goodid){
                 this.$router.push({ name: 'Commodity_details',query:{id:goodid}})
             },
              getVal(msg){//msg就是传过来的数据了  这只是个形参  名字可以随意
                 this.PhoneVerificationStyle=msg;//然后将数据赋值给
                }
        },

        watch: {
            goodsName: function (newVal, ordVal) {
                if ("" == newVal) {
                    this.shops_seach = false
                    this.good_list_list_show=false
                } else {
                    this.shops_seach = true
                }
            }
            //  '$route.path': function (newVal, oldVal) {
            //      console.log('变化')
            //  }
        }
    }
</script>
